<script setup>
import GoBackAndSearchNav from "@/components/GoBackAndSearchNav.vue";
import {ref, onBeforeMount} from 'vue'
import useProductStore from "@/store/modules/ProductStore.js";
import {delCommentById, getProductById} from "@/api/product.js";
import {showConfirmDialog, showImagePreview} from 'vant';
import 'vant/es/image-preview/style'
import 'vant/es/dialog/style'
import {getDateTimeFormatNow} from "../../utils/DateUtils.js";
import {WAIT_COMMENT, WAIT_DELIVERY, WAIT_PAY, WAIT_RECEIVE} from "@/constants/OrderStatus.js";
import {useRouter} from 'vue-router'

const router = useRouter()

const comment = ref({})
const product = ref({})
const productImg = ref('')
const rate = ref(5)
onBeforeMount(async () => {
  comment.value = useProductStore().comment
  product.value = await getProductById(comment.value.productId)
  productImg.value = product.value.imgs[0].img
  rate.value = comment.value.score
})

// 图片预览
const imgPreview = () => {
  const imgUrls = product.value.imgs.map(item => item.img)
  showImagePreview(imgUrls);
}
const commentImgPreview = (idx) => {
  const imgUrls = comment.value.commentsImg.map(item => item.imgUrl)
  showImagePreview({images: imgUrls, startPosition: idx});
}

const onRemoveComment = async () => {
  showConfirmDialog({
    message: '是否确认删除评论'
  }).then(async () => {
    // on confirm
    const res = await delCommentById(comment.value.id)
    if (res) {
      router.back()
    }
  }).catch(() => {
    // on cancel
  });
}
</script>

<template>
  <div class="my-comment-detail">
    <GoBackAndSearchNav :title="'评论详情'" :placeholder="true"></GoBackAndSearchNav>
    <van-cell-group>
      <van-cell title="商品名称" :value="product?.title" />
      <van-cell class="flex-center" title="商品图片">
        <template #value>
          <div class="flex justify-end items-center">
            <div class="w-12 h-12" @click="imgPreview">
              <img class="w-full h-full object-contain" :src="productImg" alt="">
            </div>
          </div>
        </template>
      </van-cell>
      <van-cell title="用户评分">
        <van-rate v-model="rate" icon="like" void-icon="like-o" readonly />
      </van-cell>
      <van-cell title="用户评价" :label="comment?.content" />
      <van-cell class="flex-center" title="评价图片">
        <template #label>
          <div class="comment-img-box">
            <div class="w-24 h-24" v-for="(item, idx) in comment?.commentsImg" @click="imgPreview(idx)">
              <img class="w-full h-full object-contain" :src="item.imgUrl" alt="">
            </div>
          </div>
        </template>
      </van-cell>
      <van-cell title="评论时间">
        {{ getDateTimeFormatNow(comment?.updateTime) }}
      </van-cell>
    </van-cell-group>
    <div class="fixed bottom-0 left-0 w-full p-2 bg-white dark:bg-neutral-900 flex justify-end">
      <div class="ml-2">
        <van-button
            type="danger" round
            @click="onRemoveComment"
        >删除评论
        </van-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.comment-img-box {
  display: grid;
  // 列数自动填充，列宽最小为 24rem，最大占1份平均grid容器宽度
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  grid-auto-flow: row; // 容器元素按顺序自动放置，默认先行后列
  column-gap: 1rem; // 列间距
  row-gap: 1rem; // 行间距
  justify-items: center; // 单元格内元素水平位置
  align-items: start; // 单元格内元素垂直位置
}
</style>